<template>
  <div class="main">
    <div class="nav">
      <router-link to="/work1">线性回归</router-link>
      <router-link to="/work2">逻辑回归</router-link>
      <router-link to="/work5">KMeans</router-link>
    </div>
    <div class="body">
      <router-view @data="getData">
      </router-view>
    </div>
    <div class="markDwonButton" @click="markdom.show=!markdom.show">数据</div>
    <transition name="MDT">
      <div class="markDwon" v-if="markdom.show">
        {{ markdom.data  }}
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      markdom:{
        show: false,
        data: {},
      }
    }
  },
  methods:{
    getData(data){
      // console.log(data);
      this.markdom.data=data;
    }
  }
}
</script>
<style lang="less">
    .main{
      background-color: black;
      display: flex;
      position: relative;
      min-height: 100vh;
      .nav{
        a{
          width: 100%;
          height: 10vh;
          line-height: 10vh;
          text-align: center;
          display: block;
          text-decoration: none;
          color: black;
        }
        a:hover{
          color: purple;
          box-shadow: 2px 2px 1px peru;
        }
        width: 12%;
        display: inline-block;
        background-color: whitesmoke;
      }
      .body{
        width: 88%;
        display: inline-block;
        background-color: white;
      }
      .markDwonButton{
        right: 0;
        top: 0;
        background-color: whitesmoke;
        border: 2px solid black;
        border-radius: 4px;
        position: absolute;
      }
    }
</style>
<style>
.markDwon{
  right: 0;
      position: absolute;
      top: 4vh;
      height: 93vh;
      width: 30%;
      background-color: whitesmoke;
      border: 1px solid rgb(64, 60, 60);
      overflow: auto;
}
.MDT-enter-active{
  animation: MTDA .5s;
}
.MDT-leave-active{
  animation: MTDA .5s reverse; 
}
@keyframes MTDA {
    0%{
      right: 0;
      top: 4vh;
      height: 93vh;
      position: absolute;
      background-color: whitesmoke;
      width: 0%;
    }
    100%{
      right: 0;
      position: absolute;
      top: 4vh;
      height: 93vh;
      width: 20%;
      background-color: whitesmoke;
    }
}
</style>